<template>
    <div>
        <Button type="primary" @click="addModal = true">添加文章</Button>
        <Table :columns="columns1" :data="table_data">
            <!--<img slot-scope="{ row }" slot="thum" style="width: 100px; height: 100px"-->
                   <!--:src="row.thum"/>-->
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">Edit</Button>
                <Button type="error" size="small" @click="remove(index)">Delete</Button>
            </template>
        </Table>
        <Modal
                width="800"
                v-model="addModal"
                title="添加文章"
                @on-ok="addArticle"
                @on-cancel="cancel">
            <span style="display:inline-block;width:80px">文章标题：</span><Input v-model="article.title"  placeholder="Enter Title" style="width: auto"/>
            <br>
            <br>
            <span style="display:inline-block;width:80px">作者：</span><Input v-model="article.author"  placeholder="Enter Author" style="width: auto"/>
            <br>
            <br>
            <span style="display:inline-block;width:80px">描述：</span><Input v-model="article.desc"  placeholder="Enter desc" style="width: auto"/>
            <br>
            <br>  <span style="display:inline-block;width:80px">是否推荐：</span>
            <i-switch v-model="article.is_rec">
                <span slot="open">是</span>
                <span slot="close">否</span>
            </i-switch>
            <br>
            <br>
            <ue :id=id :config=config  ref="ue"></ue>
        </Modal>
    </div>

</template>
<script>

    import ue from  '../../components/common/ueditor.vue';

    export default {
        name: 'ArticleComponent',
        components:{
            ue
        },
        data() {
            return {
                // 初始化Ueditor配置参数
                config: {
                    initialFrameWidth: null,
                    initialFrameHeight: 300
                },
                articleData:{

                },
                article:{},
                id: 'container',// 不同编辑器必须不同的id
                columns1: [
                    {
                        title: '标题',
                        key: 'title'
                    },
                    {
                        title: '作者',
                        key: 'author'
                    },
                    {
                        title: '缩略图',
                        key:'thum',
                        render:(h,params)=>{
                            if(params.row.thum){
                                return h('img',{
                                    props:params.row.thum
                                })
                            }else {
                                return h('span','暂无缩略图')
                            }
                        }
                        // slot: 'thum',
                    },
                    {
                        title: '日期',
                        key: 'updated_at'
                    },
                    {
                        title: 'Action',
                        slot: 'action',
                        width: 150,
                        align: 'center'
                    }
                ],
                table_data: [
                    {
                        title: '2020年共同抗疫',
                        author: 'John Brown',
                        thum: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg',
                        date: '2016-10-03'
                    }],
                addModal:false,
                // addTitle:"",
                // addAuthor:'',
                // add_desc:'',
                is_rec:false,
                article_id:''
            }
        },
        mounted(){
            this.getAll();
        },
        methods: {
            // 获取富文本内容
            getEdiotrContent () {
                let content = this.$refs.ue.getUEContent() // 调用子组件方法
                this.articleData.articleContent = content
            },
            show(index) {

                this.article_id=this.table_data[index].id;
                this.article.title=this.table_data[index].title;
                this.article.author=this.table_data[index].author;
                this.article.desc=this.table_data[index].desc;
                this.articleData.articleContent = this.table_data[index].content;
                this.$refs.ue.setUEContent(this.table_data[index].content);
                this.article.is_rec=(this.table_data[index].rec==1) ? true:false;
                this.addModal=true;
            },
            remove(index) {
                const url='article/'+ this.table_data[index].id;
                axios.delete(url,{
                    data:{'id' : this.table_data[index].id}
                }).then((response)=>{
                    this.$Message.info(response.data.msg);
                    if(response.data.code===1){
                        //code为1是删除成功
                        this.table_data.splice(index, 1);
                    }else {

                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            getAll() {
                axios.get('article', {}).then((response) => {
                    console.log(response);
                    this.table_data = response.data;
                }).catch(function (error) {
                    console.log(error);
                });
            },
            cancel() {
                this.$Message.info('Clicked cancel');
            },
            addArticle() {
                this.getEdiotrContent();
                if(this.article_id){
                    const url="article/"+this.article_id;
                    axios.put(url,{
                        'id':this.article_id,
                        'title':this.article.title,
                        'author':this.article.author,
                        'desc':this.article.desc,
                        'rec':this.article.is_rec ? 1:0,
                        'content':this.articleData.articleContent
                    }).then((response)=>{
                        this.$Message.info(response.data.msg);
                        this.article={};
                        this.article_id='';
                        this.$refs.ue.setUEContent('');
                        setTimeout(()=>{
                            this.getAll();
                        },1500);
                    }).catch(function (error) {
                        console.log(error);
                    });
                }else {
                    axios.post('article',{
                        'title':this.article.title,
                        'author':this.article.author,
                        'desc':this.article.desc,
                        'rec':this.article.is_rec ? 1:0,
                        'content':this.articleData.articleContent

                    }).then((response)=>{
                        this.$Message.info(response.data.msg);
                        setTimeout(()=>{
                            this.getAll();
                        },1500);
                    }).catch(function (error) {
                        console.log(error);
                    })
                }

            },
        }
    }
</script>

<style scoped>

</style>